Wikipedia:WikiProject Usability/Color

Some general rules should never change, for consistency's sake.

• blue text = link to existing page
• red text = link to not existing page (only occurs for "discussion")
• black bold text (where a link would be fitting) = self link

Thus overriding a link color, especially to red, is confusing and should be avoided.

Be careful with colors, and especially contrast:

• Be aware of the contrast of both plain text and the blue link text with the background color and avoid clashes where possible (such as blue writing on a red background).
• If an article overuses colors, add a tag to the top of the article: {{Overcolored}}

Aesthetic ideas

Color may be used to convey information, to make things stand out, or to make things aesthetically pleasing. Wikipedia allows the use of color through HTML and CSS (See our standards regarding HTML).

We believe that:

• Colors must be used carefully
• Things conveyed with colors must also be conveyed by other means

(A list of aesthetic implementations or concepts.)

• Simplicity - some users advocate the abolition of color altogether. We disagree with this, but we do acknowledge their point: do not employ anything that does not serve a purpose. (There is, however, a clear need for color: the main page uses it to allow the user to focus onto one aspect of a relatively "busy" space, and notices use it to bring attention to themselves.)

With regard to notices, tables, and similar elements:

• A very light background - many of the most popular websites on the internet use this, and with good reason. Dark backgrounds look inactive ("dead"), brightly-colored backgrounds cause eye-strain, and both are generally unpleasant.
• A thin and slightly darker border - One very good looking use of colors is a light colored background, with a 1px border that is a darker version of that same color.

Wikipedia uses the following color scheme on its new main page:

Title

this is an example of black text with color applied to its background and border

Title

this is an example of black text with color applied to its background and border

Title

this is an example of black text with color applied to its background and border

Title

this is an example of black text with color applied to its background and border

Color scheme from Commons:Help:Contents:

Title

this is an example of black text with color applied to its background and border

Title

this is an example of black text with color applied to its background and border

Other color schemes:

this is an example of text with color applied to its background and border

this is an example of text with color applied to its background and border

Wikipedia used this color scheme on its old main page:

this is an example of text with color applied to its background and border

this is an example of text with color applied to its background and border

Colors to convey intent

Colors are associated with various concepts.

• Red - hostility, disagreement, "stop!", "attention!"
• Green - "go ahead", openness
• Blue - order, calm, neutrality
• Purple - (varies greatly due to region)
• Orange/Yellow - cheerfulness, surprise
• Gray - passiveness

When using color in a template that may appear critical of some work that a user has done, such as the npov or merge templates, it is best to use a neutral color - definitely not red. The following exaggerated message is clearly not productive:

There is a dispute as to the factual accuracy of this article, please[...]

[...]

Improper use of color

Have a look at the following examples:

• this is an example of text with color applied to its background and foreground
• this is an example of text with color applied to its background and foreground
• this is an example of text with color applied to its background and foreground

Now, it's possible to read some of the above (if your eyes are in perfect working order) - but do you want to? Most bleed into their backgrounds, or cause quite a bit of strain on the eyes. Not all are suitable for use in Wikipedia. Please avoid using colors in the manner depicted above on Wikipedia articles. When using any change to the background color, the text color should also be set to black if no other color is intended, since some users may have their default color scheme set to white on a dark color.